<template>
    <section class="embroidery-area">
        <section class="embroidery-area-container" :style="renderStyle">
            <figure>
                <img :src="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb-12x12-bg.png')"
                    alt="emb-background">
            </figure>
            <div class="embroidery-area-container-describe" :class="{ show: scroll > 0 }">
                <h2>Stitch Your Vision with <br /> 12x12 <br /> Embroidery</h2>
                <p>
                    Expand your design possibilities in our industry's largest embroidery area: <strong>12x12
                        inches</strong>. Stunning visuals and bold,
                    intricate designs, are all within your reach.
                </p>
            </div>
        </section>
    </section>
</template>
<script>
export default {
    props: {
        screen_height: {
            type: Number,
            default: 0
        },
        scroll: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {
        }
    },
    computed: {
        renderStyle () {
            const style = {}
            if (this.scroll) {
                if (this.scroll < this.screen_height / 2) {
                    Object.assign(style, {
                        position: 'fixed',
                        top: '78px',
                        transform: `scale(${this.scale})`
                    })
                } else {
                    Object.assign(style, {
                        position: 'absolute',
                        bottom: `0`,
                        transform: `scale(${this.scale})`
                    })
                }
            }
            return style
        },
    },
    watch: {
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.embroidery-area {
    position: relative;
    height: calc(var(--screen-height) * 1.5);
}

.embroidery-area-container {
    position: relative;
    width: 100vw;
    height: var(--screen-height);

    figure {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: translate(-50%, -50%);

        img {
            position: absolute;
            height: 100%;
            width: 100%;
            object-fit: cover
        }
    }

    .embroidery-area-container-describe {
        box-sizing: border-box;
        z-index: 1;
        position: absolute;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 38%;
        height: var(--screen-height);
        padding: 0 60px;
        color: #fff;
        background: rgba($color: #000000, $alpha: 0.6);
        opacity: 0;
        transition: all 0.5s;

        &.show {
            opacity: 1;
        }

        h2 {
            max-width: 600px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 48px;
            color: #FFFFFF;
            line-height: 68px;
            margin-bottom: 40px;

            br {
                &:last-child {
                    display: none;
                }
            }
        }

        p {
            width: 100%;
            max-width: 600px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            font-size: 26px;
            color: #FFFFFF;
            line-height: 48px;
            text-align: left;
            font-style: normal;

            strong {
                background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}

.embroidery-area.animation-none {
    height: auto;

    .embroidery-area-container {
        position: static !important;
        transform: none !important;
        flex-direction: column;
        height: auto;
        min-height: auto;

        figure {
            position: relative;
            top: auto;
            left: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
            overflow: hidden;
            transform: none;

            img {
                position: static;
                width: 100%;
                height: auto;
                object-fit: cover
            }
        }

        .embroidery-area-container-describe {
            position: relative;
            width: 100%;
            height: auto;
            padding: 40px 14px 40px;
            opacity: 1;

            h2 {
                font-size: 24px !important;
                line-height: 28px !important;
                margin-bottom: 14px;

                br {
                    &:first-child {
                        display: none;
                    }

                    &:last-child {
                        display: block;
                    }
                }
            }

            p {
                width: 100%;
                max-width: auto;
                font-size: 16px !important;
                line-height: 24px !important;

                strong {
                    background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }

    .embroidery-area-container+section {
        display: none;
    }
}

@media screen and (max-width:1200px) {
    .embroidery-area-container-describe {
        h2 {
            font-size: 36px !important;
            line-height: inherit !important;
        }

        p {
            font-size: 20px !important;
            line-height: inherit !important;
        }
    }
}
</style>